<template>
  <div class="blog-lsit-warap">
    <div class="blog-lsit" v-if="list.length>0">
      <div class="blog-list-item" v-for="blog of list" :key="blog.id">
        <div class="item-image">
          <img :src="blog.user.picture" />
        </div>
        <div class="item-content clear-fix">
          <div class="item-conten-img">
            <img :src="blog.image" alt />
          </div>
          <div class="item-content-text"  >
            <router-link :to="`/profile/${blog.user.id}`">{{ blog.user.nickName }}:</router-link>
            <p v-html="blog.htmlContent"></p>
          </div>
        </div>
        <div class="item-tool">
          <span class="item-date">{{ blog.createdDate }}</span>
          <a class="item-comment" @click.prevent="comment(blog.user,blog.content)">回复</a>
        </div>
      </div>
    </div>
    <div v-else>无博客</div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import {
  loadMoreBlog
} from 'api/profile'
export default {
  name: 'blogList',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    ...mapMutations(['setComment']),
    /**
     * 点击回复
     * @method comment
     * @param {String} content
     */
    comment (user, content) {
      let comment = ` // @${user.nickName} - ${user.id} : ${content}`
      this.setComment(comment)
    }

  }
}
</script>
<style lang="scss" scoped>
.blog-lsit {
  .blog-list-item {
    position: relative;
    padding-left: 70px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    .item-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      vertical-align: top;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-content {
      text-align: left;
      .item-conten-img {
        float: right;
        width: 100px;
        max-height: 200px;
        margin-left: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p{
        margin-top: 10px;
      }
    }
    .item-tool{
        margin-top: 10px;
        font-size: 13px;
      .item-date {
        color: #666;
      }
      .item-comment{
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }

}
.clear-fix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
